<template>
  <div>
    <Form :model="formItem" :label-width="120">
      <Tabs value="name0">
        <TabPane :label="$t('baseInfo')" name="name0">
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.region') + '：'">
                <span>中国-北京-顺义区-后沙峪XXX国际大厦</span>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem :label="$t('equipment.sellType') + '：'">
                <span>购买</span>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.deviceName') + '：'">
                <span>808脱毛</span>
              </FormItem>
            </Col>
            <Col span="12"> 
             <FormItem :label="$t('equipment.status') + '：'">
                <span>正常</span>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="12">
              <FormItem :label="$t('equipment.serialNumber') + 'ID：'">
                <span> 1234567800</span>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem :label="$t('equipment.outStorageTime') + '：'">
                <span>2020-01-22 12：12：12</span>
              </FormItem></Col
            >
          </Row>
          <Row>
            <Col span="24">
              <FormItem :label="$t('equipment.handle') + 'ID：'">
                <Table
                  :loading="loading"
                  border
                  :columns="columns"
                  :data="item.data"
                  ref="table"
                  sortable="custom"
                >
                  <template slot-scope="{ row }" slot="status">
                    {{ row.status | status }}
                  </template>
                </Table>
              </FormItem>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
      <Tabs value="name1">
        <TabPane :label="$t('agentInfo')" name="name1">
          <Row>
            <Col span="12">
              <FormItem :label="$t('agency')">
                <span>xxxxxxxx</span>
              </FormItem>
            </Col>

            <Col span="12">
              <FormItem :label="$t('phone')">
                <span>17710723938</span>
              </FormItem>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        data: [
          {
            id: "12345678",
          },
          {
            id: "12345678",
          },
          {
            id: "12345678",
          },
          {
            id: "12345678",
          },
          {
            id: "12345678",
          },
          {
            id: "12345678",
          },
        ],
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber"),
          key: "id",
          align: "center",
        },
      ],
    };
  },
  computed: {
    lang() {
      return this.$store.state.app.lang;
    },
  },
  watch: {
    lang(val) {
      this.columns = [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber"),
          key: "id",
          align: "center",
        },
      ];
    },
  },
};
</script>

<style>
</style>